<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-sacle=1.0,minimum-sacle=1.0,user-scalable=no">
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入swiper.min.css文件 -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入flexible.js文件 -->
    <script src="js/index.js"></script>
    <!-- 引入swiper.min.js文件 -->
    <script src="js/swiper.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="body">
        <div class="topfocus_login">
            <a href="" class="classify"></a>
            <div class="top_focus">
                <img src="imgs/top-focus.gif" alt="">
            </div>
            <a href="" class="login"></a>
        </div>
        <div class="search">
            <div class="search_tap">
                <i class="icon_fdj"></i> 嗨购双11 满300减40
            </div>
        </div>
        <div class="focus_pic">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href=""><img src="upload/focus_01.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="upload/focus_02.jpg" alt=""></a>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="upload/focus_03.jpg" alt=""></a>
                    </div>
                </div>
                <!-- Add Pagination
                <div class="swiper-pagination"></div> -->
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>

            </div>
        </div>
        <div class="main_seeting">
            <a href=""><img src="upload/main-metting-01.gif" alt=""></a>
            <a href=""><img src="upload/main-metting-02.gif" alt=""></a>
            <a href=""><img src="upload/main-metting-03.gif" alt=""></a>
        </div>
        <nav>
            <ul>
                <li>
                    <a href="">
                        <img src="imgs/nav-01.png" alt="">
                        <p>苏宁秒杀</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="imgs/nav-02.png" alt="">
                        <p>苏宁秒杀</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="imgs/nav-03.png" alt="">
                        <p>苏宁秒杀</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="imgs/nav-04.png" alt="">
                        <p>苏宁秒杀</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="imgs/nav-05.png" alt="">
                        <p>苏宁秒杀</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="imgs/nav-06.png" alt="">
                        <p>苏宁秒杀</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="imgs/nav-07.png" alt="">
                        <p>苏宁秒杀</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="imgs/nav-08.png" alt="">
                        <p>苏宁秒杀</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="imgs/nav-09.png" alt="">
                        <p>苏宁秒杀</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="imgs/nav-10.png" alt="">
                        <p>苏宁秒杀</p>
                    </a>
                </li>
            </ul>
        </nav>
        <div class="tabbar">
            <ul>
                <li>
                    <img src="imgs/tabbar-1-on.png" alt="">
                    <p>首页</p>
                </li>
                <li>
                    <img src="imgs/tabbar-2-on.png" alt="">
                    <p>分类</p>
                </li>
                <li>
                    <img src="imgs/tabbar-3-on.png" alt="">
                    <p>排行榜</p>
                </li>
                <li>
                    <img src="imgs/tabbar-4-on.png" alt="">
                    <p>购物车</p>
                    </p>
                </li>
                <li>
                    <img src="imgs/tabbar-5-on.png" alt="">
                    <p>我的易购</p>
                </li>

            </ul>
        </div>
    </div>
</body>

</html>

<script>
    var swiper = new Swiper('.swiper-container', {
        // 设置swiper-slide之间的间距
        spaceBetween: 0,
        speed: 200,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>